<template>
	<div id="good-categories" v-loading.body="$store.state.loading">
		<search-header color="white"></search-header>
		<div class="mb-footer fixed-box">
			<ul class="categories-select">
				<li @click="getCategory(category, index)" :class="{active: index == activeCategoryIndex}" v-for="(category,index) in categories">{{category[prefix+'title']}}</li>
			</ul>
			<div class="category-box">
				<div class="content">
					<img class="ad-img" :src="categories[activeCategoryIndex] ? categories[activeCategoryIndex].ad : ''">
					<ul class="sub-categories">
						<router-link :to="'/goods/search?category_id='+category.id" tag="li" v-for="category in sub_categories" :key="category.id">{{category[prefix+'title']}}</router-link>
					</ul>
					<div class="hot-sales">
						<div class="title">
							<i class="iconfont icon-huo"></i> 热卖推荐
						</div>
						<ul class="goods clearfix">
							<router-link :to="'/goods/detail/'+product.id" tag="li" v-for="product in products" :key="product.id">
								<img :src="product.thumbnail">
								<span class="text">{{product[prefix+'title']}}</span>
							</router-link>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<app-footer></app-footer>
		<div class="bottom-margin"></div>
	</div>
</template>

<script>
import SearchHeader from '~/components/SearchHeader.vue';
import AppFooter from '~/components/AppFooter.vue';
import api from '~/api/api.js';

export default {
	components: {
		SearchHeader, AppFooter
	},
	name: 'good-categories',
	created () {
		this.$store.commit('loading', true);
		api.get('/category').then(response => {
			this.$store.commit('loading', false);
			this.categories = response.data;
		}).catch(error => {
			this.$store.commit('loading', false);
			this.$message.error('加载失败');
		});
	},
	data () {
		return {
			prefix: '',
			categories: [],
			activeCategoryIndex: 0
		}
	},
	computed: {
		sub_categories: function () {
			return this.categories[this.activeCategoryIndex] ? this.categories[this.activeCategoryIndex].sub_categories : [];
		},
		products: function () {
			return this.categories[this.activeCategoryIndex] ? this.categories[this.activeCategoryIndex].products : [];
		}
	},
	methods: {
		getCategory: function (category, index) {
			this.activeCategoryIndex = index;
			if (this.categories[this.activeCategoryIndex].products) {
				//已加载过了
				return;
			}

			api.get('/category/detail/'+category.id).then(response => {
				this.$set(category, 'sub_categories', response.data.sub_categories);
				this.$set(category, 'products', response.data.products);
				this.activeCategoryIndex = index;
			});
		}
	}
}
</script>

<style scoped>

.fixed-box {
	position: fixed;
	top: 51px;
	bottom: 0px;
	width: 100%;
}

.categories-select {
	background-color: #e0e0e0;
	width: 20%;
	font-size: 13px;
	float: left;
	height: 100%;
	overflow: scroll;
}

.categories-select li {
	padding: 15px 0px 15px 0px;
	text-align: center;
	border-left: 4px solid #e0e0e0;
	border-bottom: 1px solid #fff;
}

.categories-select li.active {
	background-color: #fff;
	color: #b21014;
	border-left: 4px solid #b21014;
}

.category-box {
	width: 80%;
	float: left;
	height: 100%;
	overflow: auto;
}

.category-box .content {
	padding:  10px;
}

.ad-img {
	width: 100%;
	height: 88px;
}

.category-box .content .sub-categories {
	overflow: hidden;
	padding: 10px 0px;
	border-bottom: 1px solid #eaeaea;
}

.category-box .content .sub-categories li {
	float: left;
	width: 33.33%;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.category-box .content .sub-categories li {
	

}

.hot-sales {
	padding: 10px 0px;
}

.hot-sales .icon-huo {
	color: #b21014;
}

.hot-sales .title {
	margin-bottom: 10px;
}

.hot-sales .goods li{
	float: left;
	width: 50%;
	padding-bottom: 5px;
	text-align: center;
	margin-bottom: 10px;
	height: 130px;
}

.hot-sales .goods li > img {
	max-width: 100%;
	height: 100px;
}

.hot-sales .goods li .text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
</style>